<div class="dialog" role="dialog">
  <h1>{{i18n "dialog.preferences.title"}}</h1>
  <form action="" method="GET" id="dialog">
    <div class="modal-tab-container">
      <div class="tab-list" role="tablist"
        aria-label="{{i18n "dialog.preferences.title"}}">
        <button class="tab-list-tab" role="tab" aria-selected="false"
          aria-controls="prefs-tabs-general" id="prefs-tabs-general-control">
          {{i18n "dialog.preferences.general"}}
        </button>
        <button class="tab-list-tab" role="tab" aria-selected="false"
          aria-controls="prefs-tabs-editor" id="prefs-tabs-editor-control">
          {{i18n "dialog.preferences.editor"}}
        </button>
        <button class="tab-list-tab" role="tab" aria-selected="false"
          aria-controls="prefs-tabs-export" id="prefs-tabs-export-control">
          {{i18n "dialog.preferences.export.title"}}
        </button>
        <button class="tab-list-tab" role="tab" aria-selected="false"
          aria-controls="prefs-tabs-zkn" id="prefs-tabs-zkn-control">
          {{i18n "dialog.preferences.zkn.title"}}
        </button>
        <button class="tab-list-tab" role="tab" aria-selected="false"
          aria-controls="prefs-tabs-display" id="prefs-tabs-display-control">
          {{i18n "dialog.preferences.display.title"}}
        </button>
        <button class="tab-list-tab" role="tab" aria-selected="false"
          aria-controls="prefs-tabs-theme" id="prefs-tabs-theme-control">
          {{i18n "dialog.preferences.theme.title"}}
        </button>
        <button class="tab-list-tab" role="tab" aria-selected="false"
          aria-controls="prefs-tabs-spellchecking"
          id="prefs-tabs-spellchecking-control">
          {{i18n "dialog.preferences.spellchecking.title"}}
        </button>
        <button class="tab-list-tab" role="tab" aria-selected="false"
          aria-controls="prefs-tabs-autocorrect"
          id="prefs-tabs-autocorrect-control">
          {{i18n "dialog.preferences.autocorrect.title"}}
        </button>
        <button class="tab-list-tab" role="tab" aria-selected="false"
          aria-controls="prefs-tabs-advanced" id="prefs-tabs-advanced-control">
          {{i18n "dialog.preferences.advanced"}}
        </button>
      </div>



      <!-- General settings -->
      <div id="prefs-tabs-general" role="tabpanel"
        aria-labelledby="prefs-tabs-general-control">
        <div class="box-container">
          <div class="box-left">
            <label for="app-lang">{{i18n "dialog.preferences.app_lang.title"}}
            </label>
            <select name="appLang" id="app-lang">
              {{#each languages}}
                <option value="{{this.bcp47}}"
                  data-download="{{this.todownload}}"
                  {{#ifCond this.bcp47 '=' ../appLang}}selected="selected"
                  {{/ifCond}}>
                  {{#if this.toDownload}}
                    {{i18n "dialog.preferences.translations.download"}}
                  {{/if}}
                  {{i18n "dialog.preferences.app_lang." this.bcp47}}
                  {{#ifCond this.completion '<' 100}}
                    ({{this.completion}}%)
                  {{/ifCond}}
                </option>
              {{/each}}
            </select>
            <p id="app-lang-download-indicator"></p>
            <hr>
            <div class="cb-group">
              <label class="cb-toggle">
                <input type="checkbox" name="darkMode" value="yes"
                  id="darkMode" {{#if darkMode}}checked="checked" {{/if}}>
                <div class="toggle"></div>
              </label>
              <label
                for="darkMode">{{i18n "dialog.preferences.nightmode"}}</label>
            </div>
            <div class="cb-group">
              <label class="cb-toggle">
                <input type="checkbox" name="fileMeta" value="yes" id="fileMeta"
                  {{#if fileMeta}}checked="checked" {{/if}}>
                <div class="toggle"></div>
              </label>
              <label
                for="fileMeta">{{i18n "dialog.preferences.file_meta"}}</label>
            </div>
            <div class="cb-group">
              <label class="cb-toggle">
                <input type="checkbox" name="hideDirs" value="yes" id="hideDirs"
                  {{#if hideDirs}}checked="checked" {{/if}}>
                <div class="toggle"></div>
              </label>
              <label
                for="hideDirs">{{i18n "dialog.preferences.hide_dirs"}}</label>
            </div>
            <div class="cb-group">
              <label class="cb-toggle">
                <input type="checkbox" name="alwaysReloadFiles" value="yes"
                  id="alwaysReloadFiles"
                  {{#if alwaysReloadFiles}}checked="checked" {{/if}}>
                <div class="toggle"></div>
              </label>
              <label
                for="alwaysReloadFiles">{{i18n "dialog.preferences.always_reload_files"}}</label>
            </div>

            <hr>
            <!-- Now the auto dark mode settings -->
            <p>
              {{i18n "dialog.preferences.auto_dark_mode_explanation"}}
            </p>
            <div class="cb-group">
              <label class="radio-toggle">
                <input type="radio" name="autoDarkMode" value="off"
                  id="auto-dark-mode-off"
                  {{#ifCond autoDarkMode '=' 'off'}}checked="checked"
                  {{/ifCond}}>
                <div class="toggle"></div>
              </label>
              <label
                for="auto-dark-mode-off">{{i18n "dialog.preferences.auto_dark_mode_off"}}</label>
            </div>
            <div class="cb-group">
              <label class="radio-toggle">
                <input type="radio" name="autoDarkMode" value="schedule"
                  id="auto-dark-mode-schedule"
                  {{#ifCond autoDarkMode '=' 'schedule'}}checked="checked"
                  {{/ifCond}}>
                <div class="toggle"></div>
              </label>
              <label for="auto-dark-mode-schedule">
                {{i18n "dialog.preferences.auto_dark_mode_schedule"}}
                <input type="text" class="inline time" pattern="\d{2}:\d{2}"
                  title="{{i18n "dialog.preferences.auto_dark_mode_schedule_format"}}"
                  value="{{ autoDarkModeStart }}" name="autoDarkModeStart">
                &mdash;
                <input type="text" class="inline time" pattern="\d{2}:\d{2}"
                  title="{{i18n "dialog.preferences.auto_dark_mode_schedule_format"}}"
                  value="{{ autoDarkModeEnd }}" name="autoDarkModeEnd">
              </label>
            </div>

            <div class="cb-group">
              <label class="radio-toggle">
                <input type="radio" name="autoDarkMode" value="system"
                  id="auto-dark-mode-system"
                  {{#ifCond autoDarkMode '=' 'system'}}checked="checked"
                  {{/ifCond}}>
                <div class="toggle"></div>
              </label>
              <label
                for="auto-dark-mode-system">{{i18n "dialog.preferences.auto_dark_mode_system"}}</label>
            </div>

          </div>
          {{!-- Right-hand side of the dialog window --}}
          <div class="box-right">
            <p>
              {{i18n "dialog.preferences.filemanager_explanation"}}
            </p>
            <div class="cb-group">
              <label class="radio-toggle">
                <input type="radio" name="fileManagerMode" value="thin"
                  id="pref-file-manager-state-thin"
                  {{#ifCond fileManagerMode '=' 'thin'}}checked="checked"
                  {{/ifCond}}>
                <div class="toggle"></div>
              </label>
              <label
                for="pref-file-manager-state-thin">{{i18n "dialog.preferences.filemanager_thin"}}</label>
            </div>
            <div class="cb-group">
              <label class="radio-toggle">
                <input type="radio" name="fileManagerMode" value="expanded"
                  id="pref-file-manager-state-exp"
                  {{#ifCond fileManagerMode '=' 'expanded'}}checked="checked"
                  {{/ifCond}}>
                <div class="toggle"></div>
              </label>
              <label
                for="pref-file-manager-state-exp">{{i18n "dialog.preferences.filemanager_expanded"}}</label>
            </div>
            <div class="cb-group">
              <label class="radio-toggle">
                <input type="radio" name="fileManagerMode" value="combined"
                  id="pref-file-manager-state-combined"
                  {{#ifCond fileManagerMode '=' 'combined'}}checked="checked"
                  {{/ifCond}}>
                <div class="toggle"></div>
              </label>
              <label
                for="pref-file-manager-state-combined">{{i18n "dialog.preferences.filemanager_combined"}}</label>
            </div>
            <hr>
            {{!-- Sorting of files by name (natural vs. ASCII) --}}
            <p>
              {{i18n "dialog.preferences.sorting_explanation"}}
            </p>
            <div class="cb-group">
              <label class="radio-toggle">
                <input type="radio" name="sorting" value="natural"
                  id="pref-sorting-natural"
                  {{#ifCond sorting '=' 'natural'}}checked="checked"
                  {{/ifCond}}>
                <div class="toggle"></div>
              </label>
              <label
                for="pref-sorting-natural">{{i18n "dialog.preferences.sorting_natural"}}</label>
            </div>
            <div class="cb-group">
              <label class="radio-toggle">
                <input type="radio" name="sorting" value="ascii"
                  id="pref-sorting-ascii"
                  {{#ifCond sorting '=' 'ascii'}}checked="checked" {{/ifCond}}>
                <div class="toggle"></div>
              </label>
              <label
                for="pref-sorting-ascii">{{i18n "dialog.preferences.sorting_ascii"}}</label>
            </div>
            {{!-- Sorting of files by time (modification vs. creation time) --}}
            <hr>
            {{!-- Use boxes for better alignment, as both options contain only a few words of text --}}
            <div class="box-container">
              <div class="box-left">
                <p>
                  {{i18n "dialog.preferences.sorting_time_explanation"}}
                </p>
                <div class="cb-group">
                  <label class="radio-toggle">
                    <input type="radio" name="sortingTime" value="modtime"
                      id="pref-sorting-modtime"
                      {{#ifCond sortingTime '=' 'modtime'}}checked="checked"
                      {{/ifCond}}>
                    <div class="toggle"></div>
                  </label>
                  <label
                    for="pref-sorting-modtime">{{i18n "dialog.preferences.modtime"}}</label>
                </div>
                <div class="cb-group">
                  <label class="radio-toggle">
                    <input type="radio" name="sortingTime" value="creationtime"
                      id="pref-sorting-creationtime"
                      {{#ifCond sortingTime '=' 'creationtime'}}checked="checked"
                      {{/ifCond}}>
                    <div class="toggle"></div>
                  </label>
                  <label
                    for="pref-sorting-creationtime">{{i18n "dialog.preferences.creationtime"}}</label>
                </div>
              </div>
              <div class="box-right">
                {{!-- The display of said sorting (needs to be here, not in the Display tab to reduce confusion of users) --}}
                <p>
                  {{i18n "dialog.preferences.display_time_explanation"}}
                </p>
                <div class="cb-group">
                  <label class="radio-toggle">
                    <input type="radio" name="fileMetaTime" value="modtime"
                      id="pref-display-modtime"
                      {{#ifCond fileMetaTime '=' 'modtime'}}checked="checked"
                      {{/ifCond}}>
                    <div class="toggle"></div>
                  </label>
                  <label
                    for="pref-display-modtime">{{i18n "dialog.preferences.modtime"}}</label>
                </div>
                <div class="cb-group">
                  <label class="radio-toggle">
                    <input type="radio" name="fileMetaTime" value="creationtime"
                      id="pref-display-creationtime"
                      {{#ifCond fileMetaTime '=' 'creationtime'}}checked="checked"
                      {{/ifCond}}>
                    <div class="toggle"></div>
                  </label>
                  <label
                    for="pref-display-creationtime">{{i18n "dialog.preferences.creationtime"}}</label>
                </div>
              </div> {{!-- End inner box right --}}
            </div>
          </div> <!-- End box right -->
        </div>
      </div>



      <!-- Editor related options -->
      <div id="prefs-tabs-editor" role="tabpanel"
        aria-labelledby="prefs-tabs-editor-control">
        <div class="box-container">
          <div class="box-left">
            <p>
              {{i18n "dialog.preferences.formatting_characters_explanation"}}
            </p>
            <!-- It's so great that these boxes also work nested <3 CSS ftw -->
            <div class="box-container">
              <div class="box-left">
                <div class="cb-group">
                  <label class="radio-toggle">
                    <input type="radio" name="editor.boldFormatting" value="**"
                      id="pref-bold-formatting-stars"
                      {{#ifCond editor.boldFormatting '=' '**'}}checked="checked"
                      {{/ifCond}}>
                    <div class="toggle"></div>
                  </label>
                  <label
                    for="pref-bold-formatting-stars"><strong>**{{i18n 'gui.formatting.bold'}}**</strong></label>
                </div>
                <div class="cb-group">
                  <label class="radio-toggle">
                    <input type="radio" name="editor.boldFormatting" value="__"
                      id="pref-bold-formatting-underscore"
                      {{#ifCond editor.boldFormatting '=' '__'}}checked="checked"
                      {{/ifCond}}>
                    <div class="toggle"></div>
                  </label>
                  <label
                    for="pref-bold-formatting-underscore"><strong>__{{i18n 'gui.formatting.bold'}}__</strong></label>
                </div>
              </div>
              <div class="box-right">
                <div class="cb-group">
                  <label class="radio-toggle">
                    <input type="radio" name="editor.italicFormatting" value="*"
                      id="pref-em-formatting-stars"
                      {{#ifCond editor.italicFormatting '=' '*'}}checked="checked"
                      {{/ifCond}}>
                    <div class="toggle"></div>
                  </label>
                  <label
                    for="pref-em-formatting-stars"><em>*{{i18n 'gui.formatting.italic'}}*</em></label>
                </div>
                <div class="cb-group">
                  <label class="radio-toggle">
                    <input type="radio" name="editor.italicFormatting" value="_"
                      id="pref-em-formatting-underscore"
                      {{#ifCond editor.italicFormatting '=' '_'}}checked="checked"
                      {{/ifCond}}>
                    <div class="toggle"></div>
                  </label>
                  <label
                    for="pref-em-formatting-underscore"><em>_{{i18n 'gui.formatting.italic'}}_</em></label>
                </div>
              </div>
            </div>
            <hr>
            <label for="editor.defaultSaveImagePath">
              {{i18n "dialog.preferences.default_image_save_path"}}
            </label>
            <input type="text" name="editor.defaultSaveImagePath"
              id="editor.defaultSaveImagePath"
              value="{{ editor.defaultSaveImagePath }}">

            <div class="box-container">
              <div class="box-left">
                <label for="editor.indentUnit">
                  {{i18n "dialog.preferences.indent_unit"}}
                </label>
                <input type="number" min="1" max="12" name="editor.indentUnit"
                  id="editor.indentUnit" value="{{ editor.indentUnit }}"><br>
              </div>
              <div class="box-right">
                <label for="editor.fontSize">
                  {{i18n "dialog.preferences.editor_font_size"}} (px)
                </label>
                <input type="number" min="6" max="96" name="editor.fontSize"
                  id="editor.fontSize" value="{{ editor.fontSize }}">
              </div>
            </div>
            <hr>
            {{i18n "dialog.preferences.readability_algorithm"}}
            <select name="editor.readabilityAlgorithm">
              <option value="dale-chall"
                {{#ifCond editor.readabilityAlgorithm '=' 'dale-chall'}}selected="selected"
                {{/ifCond}}>Dale-Chall</option>
              <option value="gunning-fog"
                {{#ifCond editor.readabilityAlgorithm '=' 'gunning-fog'}}selected="selected"
                {{/ifCond}}>Gunning-Fog</option>
              <option value="coleman-liau"
                {{#ifCond editor.readabilityAlgorithm '=' 'coleman-liau'}}selected="selected"
                {{/ifCond}}>Coleman/Liau</option>
              <option value="automated-readability"
                {{#ifCond editor.readabilityAlgorithm '=' 'automated-readability'}}selected="selected"
                {{/ifCond}}>Automated Readability Index (ARI)
              </option>
            </select>
          </div>
          <div class="box-right">
            <div class="cb-group">
              <label class="cb-toggle">
                <input type="checkbox" name="muteLines" value="yes"
                  id="muteLines" {{#if muteLines}}checked="checked" {{/if}}>
                <div class="toggle"></div>
              </label>
              <label
                for="muteLines">{{i18n "dialog.preferences.mute_lines"}}</label>
            </div>
            <div class="cb-group">
              <label class="cb-toggle">
                <input type="checkbox" name="editor.autoCloseBrackets"
                  value="yes" id="autoCloseBrackets"
                  {{#if editor.autoCloseBrackets}}checked="checked" {{/if}}>
                <div class="toggle"></div>
              </label>
              <label
                for="autoCloseBrackets">{{i18n "dialog.preferences.auto_close_brackets"}}</label>
            </div>
            <div class="cb-group">
              <label class="cb-toggle">
                <input type="checkbox" name="editor.autocompleteAcceptSpace"
                  value="yes" id="autocompleteAcceptSpace"
                  {{#if editor.autocompleteAcceptSpace}}checked="checked" {{/if}}>
                <div class="toggle"></div>
              </label>
              <label
                for="autocompleteAcceptSpace">{{i18n "dialog.preferences.autocomplete_accept_space"}}</label>
            </div>
            <div class="cb-group">
              <label class="cb-toggle">
                <input type="checkbox" name="editor.homeEndBehaviour"
                  value="yes" id="homeEndBehaviour"
                  {{#if editor.homeEndBehaviour}}checked="checked" {{/if}}>
                <div class="toggle"></div>
              </label>
              <label
                for="homeEndBehaviour">{{i18n "dialog.preferences.homeEndBehaviour"}}</label>
            </div>
            <div class="cb-group">
              <label class="cb-toggle">
                <input type="checkbox" name="editor.enableTableHelper"
                  value="yes" id="enableTableHelper"
                  {{#if editor.enableTableHelper}}checked="checked" {{/if}}>
                <div class="toggle"></div>
              </label>
              <label
                for="enableTableHelper">{{i18n "dialog.preferences.enable_table_helper"}}</label>
            </div>
            <div class="cb-group">
              <label class="cb-toggle">
                <input type="checkbox" name="editor.countChars" value="yes"
                  id="countChars" {{#if editor.countChars}}checked="checked"
                  {{/if}}>
                <div class="toggle"></div>
              </label>
              <label
                for="countChars">{{i18n "dialog.preferences.count_chars"}}</label>
            </div>

            {{!-- RTL support options --}}
            <hr>
            <div class="cb-group">
              <label class="cb-toggle">
                <input type="checkbox" name="editor.rtlMoveVisually" value="yes"
                  id="rtlMoveVisually"
                  {{#if editor.rtlMoveVisually}}checked="checked" {{/if}}>
                <div class="toggle"></div>
              </label>
              <label
                for="rtlMoveVisually">{{i18n "dialog.preferences.editor_setting.rtl_move_visually"}}</label>
            </div>
            <div class="cb-group">
              <label class="radio-toggle">
                <input type="radio" name="editor.direction" value="ltr"
                  id="pref-editor-direction-ltr"
                  {{#ifCond editor.direction '=' 'ltr'}}checked="checked"
                  {{/ifCond}}>
                <div class="toggle"></div>
              </label>
              <label
                for="pref-editor-direction-ltr">{{i18n "dialog.preferences.editor_setting.direction_ltr"}}</label>
            </div>
            <div class="cb-group">
              <label class="radio-toggle">
                <input type="radio" name="editor.direction" value="rtl"
                  id="pref-editor-direction-rtl"
                  {{#ifCond editor.direction '=' 'rtl'}}checked="checked"
                  {{/ifCond}}>
                <div class="toggle"></div>
              </label>
              <label
                for="pref-editor-direction-rtl">{{i18n "dialog.preferences.editor_setting.direction_rtl"}}</label>
            </div>

            <hr>
            <div class="cb-group">
              {{i18n "dialog.preferences.input_mode"}}
              <select name="editor.inputMode">
                <option value="default"
                  {{#ifCond editor.inputMode '=' 'default'}}selected="selected"
                  {{/ifCond}}>Normal</option>
                {{!-- <option value="vim" {{#ifCond editor.inputMode '=' 'vim'}}selected="selected"{{/ifCond}}>Vim</option> --}}
                <option value="emacs"
                  {{#ifCond editor.inputMode '=' 'emacs'}}selected="selected"
                  {{/ifCond}}>Emacs</option>
              </select>
            </div>
          </div>
        </div>
      </div>



      <!-- Export related options (except pandoc+xelatex) -->
      <div id="prefs-tabs-export" role="tabpanel"
        aria-labelledby="prefs-tabs-export-control">
        <div class="box-container">
          <div class="box-left">
            <p>{{i18n "dialog.preferences.export.stripping"}}</p>
            <p>
              <div class="cb-group">
                <label class="cb-toggle">
                  <input type="checkbox" name="export.stripIDs" value="yes"
                    id="export.stripIDs"
                    {{#if export.stripIDs}}checked="checked" {{/if}}>
                  <div class="toggle"></div>
                </label>
                <label
                  for="export.stripIDs">{{i18n "dialog.preferences.export.strip_id_label"}}</label>
              </div>
              <div class="cb-group">
                <label class="cb-toggle">
                  <input type="checkbox" name="export.stripTags" value="yes"
                    id="export.stripTags"
                    {{#if export.stripTags}}checked="checked" {{/if}}>
                  <div class="toggle"></div>
                </label>
                <label
                  for="export.stripTags">{{i18n "dialog.preferences.export.strip_tags_label"}}</label>
              </div>
            </p>
            <hr>
            <div class="cb-group">
              <label class="radio-toggle">
                <input type="radio" name="export.stripLinks" value="full"
                  id="pref-export-strip-link-full"
                  {{#ifCond export.stripLinks '=' 'full'}}checked="checked"
                  {{/ifCond}}>
                <div class="toggle"></div>
              </label>
              <label
                for="pref-export-strip-link-full">{{i18n "dialog.preferences.export.strip_links_full_label"}}</label>
            </div>
            <div class="cb-group">
              <label class="radio-toggle">
                <input type="radio" name="export.stripLinks" value="unlink"
                  id="pref-export-strip-link-unlink"
                  {{#ifCond export.stripLinks '=' 'unlink'}}checked="checked"
                  {{/ifCond}}>
                <div class="toggle"></div>
              </label>
              <label
                for="pref-export-strip-link-unlink">{{i18n "dialog.preferences.export.strip_links_unlink_label"}}</label>
            </div>
            <div class="cb-group">
              <label class="radio-toggle">
                <input type="radio" name="export.stripLinks" value="no"
                  id="pref-export-strip-link-no"
                  {{#ifCond export.stripLinks '=' 'no'}}checked="checked"
                  {{/ifCond}}>
                <div class="toggle"></div>
              </label>
              <label
                for="pref-export-strip-link-no">{{i18n "dialog.preferences.export.strip_links_no_label"}}</label>
            </div>
            <hr>
            {{!-- Miscellaneous export options --}}
            <div class="cb-group">
                <label class="cb-toggle">
                  <input type="checkbox" name="export.useBundledPandoc" value="yes"
                    id="export.useBundledPandoc"
                    {{#if export.useBundledPandoc}}checked="checked" {{/if}}>
                  <div class="toggle"></div>
                </label>
                <label
                  for="export.useBundledPandoc">{{i18n "dialog.preferences.export.use_bundled_pandoc"}}</label>
              </div>
          </div>
          <div class="box-right">
            <p>
              {{i18n "dialog.preferences.export.dest"}}
            </p>
            <div class="cb-group">
              <label class="radio-toggle">
                <input type="radio" name="export.dir" value="temp"
                  id="pref-export-temp"
                  {{#ifCond export.dir '=' 'temp'}}checked="checked"
                  {{/ifCond}}>
                <div class="toggle"></div>
              </label>
              <label
                for="pref-export-temp">{{i18n "dialog.preferences.export.dest_temp_label"}}</label>
            </div>
            <div class="cb-group">
              <label class="radio-toggle">
                <input type="radio" name="export.dir" value="cwd"
                  id="pref-export-cwd"
                  {{#ifCond export.dir '=' 'cwd'}}checked="checked" {{/ifCond}}>
                <div class="toggle"></div>
              </label>
              <label
                for="pref-export-cwd">{{i18n "dialog.preferences.export.dest_cwd_label"}}</label>
            </div>
            <hr>
            <label
              for="cslLibrary">{{i18n "dialog.preferences.citation_database"}}</label>
            <div class="input-button-group">
              <input type="text" name="export.cslLibrary" id="cslLibrary"
                value="{{export.cslLibrary}}">
              <button type="button" class="request-file"
                data-tippy-content="{{i18n "dialog.preferences.choose_file"}}"
                data-request-name="CSL JSON, CSL YAML or BibTex"
                data-request-ext="json,yaml,yml,bib"
                data-request-target="#cslLibrary">
                <clr-icon shape="file"></clr-icon>
              </button>
            </div>
            <label
              for="cslStyle">{{i18n "dialog.preferences.project.csl_style"}}</label>
            <div class="input-button-group">
              <input type="text" name="export.cslStyle" id="cslStyle"
                value="{{export.cslStyle}}">
              <button type="button" class="request-file"
                data-tippy-content="{{i18n "dialog.preferences.choose_file"}}"
                data-request-name="Citation Style Language File"
                data-request-ext="csl" data-request-target="#cslStyle">
                <clr-icon shape="file"></clr-icon>
              </button>
            </div>
          </div>
        </div>
      </div>



      <!-- Zettelkasten options -->
      <div id="prefs-tabs-zkn" role="tabpanel"
        aria-labelledby="prefs-tabs-zkn-control">
        <div class="box-container">
          <div class="box-left">
            <p>{{i18n "dialog.preferences.zkn.intro"}}</p>

            <label
              for="pref-zkn-free-id">{{i18n "dialog.preferences.zkn.id_label"}}</label>
            <div class="input-button-group">
              <input type="text" id="pref-zkn-free-id" value="{{zkn.idRE}}"
                name="zkn.idRE">
              <button type="button" id="reset-id-regex"
                data-tippy-content="{{i18n "dialog.preferences.zkn.reset_default_id"}}">
                <clr-icon shape="refresh">
                  </clr>
              </button>
            </div>

            <div class="box-container">
              <div class="box-left">
                <label for="pref-zkn-free-linkstart">
                  {{i18n "dialog.preferences.zkn.linkstart_label"}}
                </label>
                <div class="input-button-group">
                  <input type="text" id="pref-zkn-free-linkstart"
                    value="{{zkn.linkStart}}" name="zkn.linkStart">
                  <button type="button" id="reset-linkstart-regex"
                    data-tippy-content="{{i18n "dialog.preferences.zkn.reset_default_linkstart"}}">
                    <clr-icon shape="refresh">
                      </clr>
                  </button>
                </div>
              </div>
              <div class="box-right">
                <label for="pref-zkn-free-linkend">
                  {{i18n "dialog.preferences.zkn.linkend_label"}}
                </label>
                <div class="input-button-group">
                  <input type="text" id="pref-zkn-free-linkend"
                    value="{{zkn.linkEnd}}" name="zkn.linkEnd">
                  <button type="button" id="reset-linkend-regex"
                    data-tippy-content="{{i18n "dialog.preferences.zkn.reset_default_linkend"}}">
                    <clr-icon shape="refresh">
                      </clr>
                  </button>
                </div>
              </div>
            </div>
            <label
              for="pref-zkn-id-gen">{{i18n "dialog.preferences.zkn.id_generator_label"}}</label>
            <div class="input-button-group">
              <input type="text" id="pref-zkn-id-gen" value="{{zkn.idGen}}"
                name="zkn.idGen">
              <button type="button" id="reset-id-generator"
                data-tippy-content="{{i18n "dialog.preferences.zkn.reset_default_generator"}}">
                <clr-icon shape="refresh">
                  </clr>
              </button>
            </div>
            <hr>
            <p>
              <button type="button"
                id="generate-id">{{i18n "dialog.preferences.zkn.test_id_generator"}}</button>
            </p>
            <p>{{i18n "dialog.preferences.zkn.generated_id"}}:
              <strong><span id="generator-tester"></span></strong>
            </p>
            <p><span id="pass-check"></span></p>
          </div>
          <div class="box-right">
            <ul>
              <li><strong>%Y</strong>:
                {{i18n "dialog.preferences.zkn.var_year"}}
              </li>
              <li><strong>%y</strong>:
                {{i18n "dialog.preferences.zkn.var_year_two"}}
              </li>
              <li><strong>%M</strong>:
                {{i18n "dialog.preferences.zkn.var_month"}}
              </li>
              <li><strong>%D</strong>:
                {{i18n "dialog.preferences.zkn.var_day"}}
              </li>
              <li><strong>%W</strong>:
                {{i18n "dialog.preferences.zkn.var_week_number"}}
              </li>
              <li><strong>%h</strong>:
                {{i18n "dialog.preferences.zkn.var_hour"}}
              </li>
              <li><strong>%m</strong>:
                {{i18n "dialog.preferences.zkn.var_minute"}}
              </li>
              <li><strong>%s</strong>:
                {{i18n "dialog.preferences.zkn.var_second"}}
              </li>
              <li><strong>%X</strong>:
                {{i18n "dialog.preferences.zkn.var_unix_epoch"}}
              </li>
              <li><strong>%uuid4</strong>:
                Universally Unique Identifier (UUID) v4
              </li>
            </ul>
            {{!-- Add the preferences to determine file linking --}}
            <hr>
            {{i18n "dialog.preferences.zkn.link_behaviour_description"}}
            <div class="cb-group">
              <label class="radio-toggle">
                <input type="radio" name="zkn.linkWithFilename" value="always"
                  id="pref-link-always"
                  {{#ifCond zkn.linkWithFilename '=' 'always'}}checked="checked"
                  {{/ifCond}}>
                <div class="toggle"></div>
              </label>
              <label
                for="pref-link-always">{{i18n "dialog.preferences.zkn.link_behaviour_always"}}</label>
            </div>
            <div class="cb-group">
              <label class="radio-toggle">
                <input type="radio" name="zkn.linkWithFilename" value="withID"
                  id="pref-link-with-id"
                  {{#ifCond zkn.linkWithFilename '=' 'withID'}}checked="checked"
                  {{/ifCond}}>
                <div class="toggle"></div>
              </label>
              <label
                for="pref-link-with-id">{{i18n "dialog.preferences.zkn.link_behaviour_id"}}</label>
            </div>
            <div class="cb-group">
              <label class="radio-toggle">
                <input type="radio" name="zkn.linkWithFilename" value="never"
                  id="pref-link-never"
                  {{#ifCond zkn.linkWithFilename '=' 'never'}}checked="checked"
                  {{/ifCond}}>
                <div class="toggle"></div>
              </label>
              <label
                for="pref-link-never">{{i18n "dialog.preferences.zkn.link_behaviour_never"}}</label>
            </div>

            <hr>

            {{!-- Should Zettlr automatically create files that it did not find when following a ZKN link? --}}
            <div class="cb-group">
              <label class="cb-toggle">
                <input type="checkbox" name="zkn.autoCreateLinkedFiles"
                  value="yes" id="zkn.autoCreateLinkedFiles"
                  {{#if zkn.autoCreateLinkedFiles}}checked="checked" {{/if}}>
                <div class="toggle"></div>
              </label>
              <label
                for="zkn.autoCreateLinkedFiles">{{i18n "dialog.preferences.zkn.auto_create_file" }}</label>
            </div>

            {{!-- Automatically start a search when clicking on links? --}}
            <div class="cb-group">
              <label class="cb-toggle">
                <input type="checkbox" name="zkn.autoSearch"
                  value="yes" id="zkn.autoSearch"
                  {{#if zkn.autoSearch}}checked="checked" {{/if}}>
                <div class="toggle"></div>
              </label>
              <label
                for="zkn.autoSearch">{{i18n "dialog.preferences.zkn.auto_search" }}</label>
            </div>
          </div>
        </div>
      </div>



      <!-- Display options -->
      <div id="prefs-tabs-display" role="tabpanel"
        aria-labelledby="prefs-tabs-display-control">
        <div class="box-container">
          <div class="box-left">
            <p>{{i18n "dialog.preferences.display.image_size_info"}}
            </p>
            <div class="image-size">
              <div class="image"></div>
              <input type="range" min="1" max="100" id="imageWidth"
                name="display.imageWidth" value="{{display.imageWidth}}">
              <input type="range" min="1" max="100" id="imageHeight"
                name="display.imageHeight" value="{{display.imageHeight}}">
              <div id="preview-image-sizes">
                {{display.imageWidth}}% &times;
                {{display.imageHeight}}%</div>
            </div>
          </div>
          <div class="box-right">
            <p>{{i18n "dialog.preferences.display.preview_info"}}
            </p>
            {{!-- Again, divide those settings into two inner blocks due to short explanations --}}
            <div class="box-container">
              <div class="box-left">
                <div class="cb-group">
                  <label class="cb-toggle">
                    <input type="checkbox" name="display.renderCitations"
                      value="yes" id="display.renderCitations"
                      {{#if display.renderCitations}}checked="checked" {{/if}}>
                    <div class="toggle"></div>
                  </label>
                  <label
                    for="display.renderCitations">{{i18n "dialog.preferences.display.render_citations"}}</label>
                </div>
                <div class="cb-group">
                  <label class="cb-toggle">
                    <input type="checkbox" name="display.renderIframes"
                      value="yes" id="display.renderIframes"
                      {{#if display.renderIframes}}checked="checked" {{/if}}>
                    <div class="toggle"></div>
                  </label>
                  <label
                    for="display.renderIframes">{{i18n "dialog.preferences.display.render_iframes"}}</label>
                </div>
                <div class="cb-group">
                  <label class="cb-toggle">
                    <input type="checkbox" name="display.renderImages"
                      value="yes" id="display.renderImages"
                      {{#if display.renderImages}}checked="checked" {{/if}}>
                    <div class="toggle"></div>
                  </label>
                  <label
                    for="display.renderImages">{{i18n "dialog.preferences.display.render_images"}}</label>
                </div>
                <div class="cb-group">
                  <label class="cb-toggle">
                    <input type="checkbox" name="display.renderLinks"
                      value="yes" id="display.renderLinks"
                      {{#if display.renderLinks}}checked="checked" {{/if}}>
                    <div class="toggle"></div>
                  </label>
                  <label
                    for="display.renderLinks">{{i18n "dialog.preferences.display.render_links"}}</label>
                </div>
              </div>
              {{!-- Second block of settings --}}
              <div class="box-right">
                <div class="cb-group">
                  <label class="cb-toggle">
                    <input type="checkbox" name="display.renderMath" value="yes"
                      id="display.renderMath"
                      {{#if display.renderMath}}checked="checked" {{/if}}>
                    <div class="toggle"></div>
                  </label>
                  <label
                    for="display.renderMath">{{i18n "dialog.preferences.display.render_math"}}</label>
                </div>
                <div class="cb-group">
                  <label class="cb-toggle">
                    <input type="checkbox" name="display.renderTasks"
                      value="yes" id="display.renderTasks"
                      {{#if display.renderTasks}}checked="checked" {{/if}}>
                    <div class="toggle"></div>
                  </label>
                  <label
                    for="display.renderTasks">{{i18n "dialog.preferences.display.render_tasks"}}</label>
                </div>
                <div class="cb-group">
                  <label class="cb-toggle">
                    <input type="checkbox" name="display.renderHTags"
                      value="yes" id="display.renderHTags"
                      {{#if display.renderHTags}}checked="checked" {{/if}}>
                    <div class="toggle"></div>
                  </label>
                  <label
                    for="display.renderHTags">{{i18n "dialog.preferences.display.render_htags"}}</label>
                </div>
              </div> {{!-- end inner box-right --}}
            </div>
            <hr>
            <div class="cb-group">
              <label class="cb-toggle">
                <input type="checkbox" name="display.useFirstHeadings"
                  value="yes" id="display.useFirstHeadings"
                  {{#if display.useFirstHeadings}}checked="checked" {{/if}}>
                <div class="toggle"></div>
              </label>
              <label
                for="display.useFirstHeadings">{{i18n "dialog.preferences.display.use_first_headings"}}</label>
            </div>
          </div>
        </div>
      </div>



      <!-- THEME SWITCHING OPTIONS -->
      <div id="prefs-tabs-theme" role="tabpanel"
        aria-labelledby="prefs-tabs-theme-control">
        <p>{{i18n "dialog.preferences.theme.info"}}</p>
        <div class="theme-container">
          <!-- Berlin Theme Mockup -->
          <div class="theme-container-item">
            <div id="theme-berlin-mockup" data-theme="berlin"
              class="theme-mockup">
              <div class="traffic-lights">
                <div class="traffic-light-close"></div>
                <div class="traffic-light-min"></div>
                <div class="traffic-light-full"></div>
              </div>
              <div class="toolbar"></div>
              <div class="file-list">
                <div class="file-list-item"></div>
                <div class="file-list-item"></div>
                <div class="file-list-item"></div>
                <div class="file-list-item"></div>
                <div class="file-list-item"></div>
                <div class="file-list-item"></div>
                <div class="file-list-item"></div>
                <div class="file-list-item"></div>
              </div>
              <div class="editor">
                <p>Berlin</p>
              </div>
            </div>
          </div>
          <!-- Frankfurt Theme Mockup -->
          <div class="theme-container-item">
            <div id="theme-frankfurt-mockup" data-theme="frankfurt"
              class="theme-mockup">
              <div class="traffic-lights">
                <div class="traffic-light-close"></div>
                <div class="traffic-light-min"></div>
                <div class="traffic-light-full"></div>
              </div>
              <div class="toolbar"></div>
              <div class="file-list">
                <div class="file-list-item"></div>
                <div class="file-list-item"></div>
                <div class="file-list-item"></div>
                <div class="file-list-item"></div>
                <div class="file-list-item"></div>
                <div class="file-list-item"></div>
                <div class="file-list-item"></div>
                <div class="file-list-item"></div>
              </div>
              <div class="editor">
                <p>Frankfurt</p>
              </div>
            </div>
          </div>
          <!-- Bielefeld Theme Mockup -->
          <div class="theme-container-item">
            <div id="theme-bielefeld-mockup" data-theme="bielefeld"
              class="theme-mockup">
              <div class="traffic-lights">
                <div class="traffic-light-close"></div>
                <div class="traffic-light-min"></div>
                <div class="traffic-light-full"></div>
              </div>
              <div class="toolbar"></div>
              <div class="file-list">
                <div class="file-list-item"></div>
                <div class="file-list-item"></div>
                <div class="file-list-item"></div>
                <div class="file-list-item"></div>
                <div class="file-list-item"></div>
                <div class="file-list-item"></div>
                <div class="file-list-item"></div>
                <div class="file-list-item"></div>
              </div>
              <div class="editor">
                <p>Bielefeld</p>
              </div>
            </div>
          </div>
          <!-- Karl Marx Stadt Theme Mockup -->
          <div class="theme-container-item">
            <div id="theme-karl-marx-stadt-mockup" data-theme="karl-marx-stadt"
              class="theme-mockup">
              <div class="traffic-lights">
                <div class="traffic-light-close"></div>
                <div class="traffic-light-min"></div>
                <div class="traffic-light-full"></div>
              </div>
              <div class="toolbar"></div>
              <div class="file-list">
                <div class="file-list-item"></div>
                <div class="file-list-item"></div>
                <div class="file-list-item"></div>
                <div class="file-list-item"></div>
                <div class="file-list-item"></div>
                <div class="file-list-item"></div>
                <div class="file-list-item"></div>
                <div class="file-list-item"></div>
              </div>
              <div class="editor">
                <p>Karl-Marx-Stadt</p>
              </div>
            </div>
          </div>
          {{!-- Bordeaux Theme Mockup --}}
          <div class="theme-container-item">
            <div id="theme-bordeaux-mockup" data-theme="bordeaux"
              class="theme-mockup">
              <div class="traffic-lights">
                <div class="traffic-light-close"></div>
                <div class="traffic-light-min"></div>
                <div class="traffic-light-full"></div>
              </div>
              <div class="toolbar"></div>
              <div class="file-list">
                <div class="file-list-item"></div>
                <div class="file-list-item"></div>
                <div class="file-list-item"></div>
                <div class="file-list-item"></div>
                <div class="file-list-item"></div>
                <div class="file-list-item"></div>
                <div class="file-list-item"></div>
                <div class="file-list-item"></div>
              </div>
              <div class="editor">
                <p>Bordeaux</p>
              </div>
            </div>
          </div>
        </div>
      </div>


      {{!-- Spellchecking options --}}
      <div id="prefs-tabs-spellchecking" role="tabpanel"
        aria-labelledby="prefs-tabs-spellchecking-control">
        <div class="box-container">
          <div class="box-left">
            <p>{{i18n "dialog.preferences.spellcheck"}}</p>
            <p>{{i18n "dialog.preferences.spellcheck_warning"}}</p>
            <input type="text" class="dicts-list-search"
              placeholder="{{i18n "dialog.preferences.spellcheck_search_placeholder"}}">
            <ul class="dicts-list">
              {{#each availableDicts}}
                <li class="cb-group dicts-list-item">
                  <label class="cb-toggle">
                    <input type="checkbox" name="selectedDicts" value="{{this}}"
                      id="{{this}}"
                      {{#ifIn this ../selectedDicts}}checked="checked"
                      {{/ifIn}}>
                    <div class="toggle"></div>
                  </label>
                  <label for="{{this}}">{{transDict this}}</label>
                </li>
              {{/each}}
            </ul>
          </div>
          <div class="box-right">
            <!-- Here come the custom user dictionary words! -->
            <p>{{i18n "dialog.preferences.user_dictionary"}}</p>
            <ul class="user-dict">
              {{#each userDictionary}}
                <li class="user-dict-item"
                  onclick="this.parentElement.removeChild(this)">
                  <input type="hidden" value="{{this}}" name="userDictionary[]">
                  <span>{{this}}</span>
                  <clr-icon shape="times"></clr-icon>
                </li>
              {{/each}}
            </ul>
          </div>
        </div>
      </div>


      {{!-- AutoCorrect Options --}}
      <div id="prefs-tabs-autocorrect" role="tabpanel"
        aria-labelledby="prefs-tabs-autocorrect-control">
        <div class="box-container">
          <div class="box-left">
            {{!-- Activate AutoCorrect? --}}
            <div class="cb-group">
              <label class="cb-toggle">
                <input type="checkbox" name="editor.autoCorrect.active"
                  value="yes" id="autoCorrectActive"
                  {{#if editor.autoCorrect.active}}checked="checked" {{/if}}>
                <div class="toggle"></div>
              </label>
              <label
                for="autoCorrectActive">{{i18n "dialog.preferences.autocorrect.active_label"}}</label>
            </div>

            <hr>
            {{!-- AutoCorrect style --}}
            <div class="cb-group">
              <label class="radio-toggle">
                <input type="radio" name="editor.autoCorrect.style" value="Word"
                  id="autoCorrectStyleWord"
                  {{#ifCond editor.autoCorrect.style '=' 'Word'}}checked="checked"
                  {{/ifCond}}>
                <div class="toggle"></div>
              </label>
              <label
                for="autoCorrectStyleWord">{{i18n "dialog.preferences.autocorrect.style_word_label"}}</label>
            </div>
            <div class="cb-group">
              <label class="radio-toggle">
                <input type="radio" name="editor.autoCorrect.style"
                  value="LibreOffice" id="autoCorrectStyleLibreOffice"
                  {{#ifCond editor.autoCorrect.style '=' 'LibreOffice'}}checked="checked"
                  {{/ifCond}}>
                <div class="toggle"></div>
              </label>
              <label
                for="autoCorrectStyleLibreOffice">{{i18n "dialog.preferences.autocorrect.style_libre_office_label"}}</label>
            </div>
            <hr>

            {{!-- Magic Quotes Section --}}
            <div class="box-container">
              <div class="box-left">
                <label
                  for="autoCorrectQuotesDouble">{{ i18n "dialog.preferences.autocorrect.quotes_double_label" }}</label>
                <select name="autoCorrectQuotesDouble"
                  id="autoCorrectQuotesDouble">
                  {{!-- Taken from: https://de.wikipedia.org/wiki/Anf%C3%BChrungszeichen --}}
                  {{!-- ATTENTION when adding new pairs: They will be SPLIT using the hyphen character! --}}
                  <option value='"…"'
                    {{#ifCond primaryQuotes '=' '"…"'}}selected="selected"
                    {{/ifCond}}>{{ i18n "dialog.preferences.autocorrect.quick_select_none_label" }}</option>
                  <option value="“…”"
                    {{#ifCond primaryQuotes '=' '“…”'}}selected="selected"
                    {{/ifCond}}>“…”</option>
                  <option value="”…”"
                    {{#ifCond primaryQuotes '=' '”…”'}}selected="selected"
                    {{/ifCond}}>”…”</option>
                  <option value="„…“"
                    {{#ifCond primaryQuotes '=' '„…“'}}selected="selected"
                    {{/ifCond}}>„…“</option>
                  <option value="„…”"
                    {{#ifCond primaryQuotes '=' '„…”'}}selected="selected"
                    {{/ifCond}}>„…”</option>
                  <option value="“…„"
                    {{#ifCond primaryQuotes '=' '“…„'}}selected="selected"
                    {{/ifCond}}>“…„</option>
                  <option value="“ … ”"
                    {{#ifCond primaryQuotes '=' '“ … ”'}}selected="selected"
                    {{/ifCond}}>“ … ”</option>
                  <option value="»…«"
                    {{#ifCond primaryQuotes '=' '»…«'}}selected="selected"
                    {{/ifCond}}>»…«</option>
                  <option value="«…»"
                    {{#ifCond primaryQuotes '=' '«…»'}}selected="selected"
                    {{/ifCond}}>«…»</option>
                  <option value="»…»"
                    {{#ifCond primaryQuotes '=' '»…»'}}selected="selected"
                    {{/ifCond}}>»…»</option>
                  <option value="‘…’"
                    {{#ifCond primaryQuotes '=' '‘…’'}}selected="selected"
                    {{/ifCond}}>‘…’</option>
                  <option value="« … »"
                    {{#ifCond primaryQuotes '=' '« … »'}}selected="selected"
                    {{/ifCond}}>« … »</option>
                  <option value="「…」"
                    {{#ifCond primaryQuotes '=' '「…」'}}selected="selected"
                    {{/ifCond}}>「…」</option>
                  <option value="『…』"
                    {{#ifCond primaryQuotes '=' '『…』'}}selected="selected"
                    {{/ifCond}}>『…』</option>
                </select>
              </div>
              <div class="box-right">
                <label
                  for="autoCorrectQuotesSingle">{{ i18n "dialog.preferences.autocorrect.quotes_single_label" }}</label>
                <select name="autoCorrectQuotesSingle"
                  id="autoCorrectQuotesSingle">
                  {{!-- Taken from: https://de.wikipedia.org/wiki/Anf%C3%BChrungszeichen --}}
                  {{!-- ATTENTION when adding new pairs: They will be SPLIT using the hyphen character! --}}
                  <option value="'…'"
                    {{#ifCond secondaryQuotes '=' "'…'"}}selected="selected"
                    {{/ifCond}}>{{ i18n "dialog.preferences.autocorrect.quick_select_none_label" }}</option>
                  <option value="‘…’"
                    {{#ifCond secondaryQuotes '=' '‘…’'}}selected="selected"
                    {{/ifCond}}>‘…’</option>
                  <option value="’…’"
                    {{#ifCond secondaryQuotes '=' '’…’'}}selected="selected"
                    {{/ifCond}}>’…’</option>
                  <option value="‚…‘"
                    {{#ifCond secondaryQuotes '=' '‚…‘'}}selected="selected"
                    {{/ifCond}}>‚…‘</option>
                  <option value="‚…’"
                    {{#ifCond secondaryQuotes '=' '‚…’'}}selected="selected"
                    {{/ifCond}}>‚…’</option>
                  <option value="‘…‚"
                    {{#ifCond secondaryQuotes '=' '‘…‚'}}selected="selected"
                    {{/ifCond}}>‘…‚</option>
                  <option value="‘ … ’"
                    {{#ifCond secondaryQuotes '=' '‘ … ’'}}selected="selected"
                    {{/ifCond}}>‘ … ’</option>
                  <option value="›…‹"
                    {{#ifCond secondaryQuotes '=' '›…‹'}}selected="selected"
                    {{/ifCond}}>›…‹</option>
                  <option value="‹…›"
                    {{#ifCond secondaryQuotes '=' '‹…›'}}selected="selected"
                    {{/ifCond}}>‹…›</option>
                  <option value="›…›"
                    {{#ifCond secondaryQuotes '=' '›…›'}}selected="selected"
                    {{/ifCond}}>›…›</option>
                  <option value="‹ … ›"
                    {{#ifCond secondaryQuotes '=' '‹ … ›'}}selected="selected"
                    {{/ifCond}}>‹ … ›</option>
                  <option value="«…»"
                    {{#ifCond secondaryQuotes '=' '«…»'}}selected="selected"
                    {{/ifCond}}>«…»</option>
                  <option value="„…“"
                    {{#ifCond secondaryQuotes '=' '„…“'}}selected="selected"
                    {{/ifCond}}>„…“</option>
                  <option value="„…”"
                    {{#ifCond secondaryQuotes '=' '„…”'}}selected="selected"
                    {{/ifCond}}>„…”</option>
                  <option value="「…」"
                    {{#ifCond secondaryQuotes '=' '「…」'}}selected="selected"
                    {{/ifCond}}>「…」</option>
                  <option value="『…』"
                    {{#ifCond secondaryQuotes '=' '『…』'}}selected="selected"
                    {{/ifCond}}>『…』</option>
                </select>
              </div>
            </div>
            {{!-- Add the quick-selectors --}}
            <p>{{ i18n "dialog.preferences.autocorrect.quick_select_label" }}</p>
            <button class="mq-select" data-primary="1"
              data-secondary="1">{{ i18n "dialog.preferences.app_lang.en-GB" }}</button>
            <button class="mq-select" data-primary="3"
              data-secondary="3">{{ i18n "dialog.preferences.app_lang.de-DE" }}</button>
            <button class="mq-select" data-primary="11"
              data-secondary="10">{{ i18n "dialog.preferences.app_lang.fr-FR" }}</button>
            <button class="mq-select" data-primary="13"
              data-secondary="14">{{ i18n "dialog.preferences.app_lang.ja-JP" }}</button>
          </div>
          <div class="box-right">
            {{!-- Replacement Table --}}
            <p>{{i18n "dialog.preferences.autocorrect.replacement_info"}}
            </p>
            <div class="modal-container-constrain-size">
              <table>
                <tbody id="autocorrect-key-container">
                  {{#each autoCorrectReplacements }}
                    <tr>
                      <td>
                        <div class="input-button-group">
                          <input type="text" name="autoCorrectKeys[]"
                            value="{{ key }}">
                        </div>
                      </td>
                      <td>
                        <div class="input-button-group">
                          <input type="text" name="autoCorrectValues[]"
                            value="{{ value }}">
                          <button class="autocorrect-remove-row">
                            <clr-icon shape="times">
                            </clr-icon>
                          </button>
                        </div>
                      </td>
                    </tr>
                  {{/each}}
                </tbody>
              </table>
            </div>
            <button id="add-autocorrect-key" class="icon">
              <clr-icon shape="plus"></clr-icon>
            </button>
          </div>
        </div>
      </div>



      <!-- Advanced options -->
      <div id="prefs-tabs-advanced" role="tabpanel"
        aria-labelledby="prefs-tabs-advanced-control">
        <div class="box-container">
          <div class="box-left">
            <label for="filename-generator">
              {{i18n "dialog.preferences.filename_generator"}}
            </label>
            <input type="text" id="filename-generator" name="newFileNamePattern"
              placeholder="%id.md" value="{{newFileNamePattern}}">
            <span class="info">Variables: %id, %Y, %y, %M, %D, %W,
              %h, %m, %s,
              %X, %uuid4</span>

            <div class="cb-group">
              <label class="cb-toggle">
                <input type="checkbox" name="newFileDontPrompt" value="yes"
                  id="newFileDontPrompt"
                  {{#if newFileDontPrompt}}checked="checked" {{/if}}>
                <div class="toggle"></div>
              </label>
              <label
                for="newFileDontPrompt">{{i18n "dialog.preferences.new_file_dont_prompt"}}</label>
            </div>
            <hr>


            <label for="pandoc">
              {{i18n "dialog.preferences.pandoc"}}
            </label>
            <input type="text" id="pandoc" name="pandoc"
              placeholder="{{i18n "dialog.preferences.pandoc_default"}}"
              value="{{pandoc}}">
            {{#if PANDOC_PATH}}
              <span class="info">Pandoc is included in this
                release at
                {{PANDOC_PATH}}</span>
            {{else}}
              <span class="info">Pandoc has <strong>not</strong>
                been included in
                this release.</span>
            {{/if}}

            <label for="xelatex">
              {{i18n "dialog.preferences.xelatex"}}
            </label>
            <input type="text" id="xelatex" name="xelatex"
              placeholder="{{i18n "dialog.preferences.xelatex_default"}}"
              value="{{xelatex}}">
            <hr>


            <div class="cb-group">
              <label class="cb-toggle">
                <input type="checkbox" name="debug" value="yes" id="debug"
                  {{#if debug}}checked="checked" {{/if}}>
                <div class="toggle"></div>
              </label>
              <label for="debug">{{i18n "dialog.preferences.debug"}}</label>
            </div>
            <div class="cb-group">
              <label class="cb-toggle">
                <input type="checkbox" name="checkForBeta" value="yes"
                  id="checkForBeta" {{#if checkForBeta}}checked="checked"
                  {{/if}}>
                <div class="toggle"></div>
              </label>
              <label
                for="checkForBeta">{{i18n "dialog.preferences.checkForBeta"}}</label>
            </div>
            <div class="cb-group">
              <label class="cb-toggle">
                <input type="checkbox" name="window.nativeAppearance"
                  value="yes" id="window.nativeAppearance"
                  {{#if window.nativeAppearance}}checked="checked" {{/if}}>
                <div class="toggle"></div>
              </label>
              <label
                for="window.nativeAppearance">{{i18n "dialog.preferences.use_native_appearance"}}</label>
            </div>
            <div class="cb-group">
              <label class="cb-toggle">
                <input type="checkbox" name="system.deleteOnFail" value="yes"
                  id="system.deleteOnFail"
                  {{#if system.deleteOnFail}}checked="checked" {{/if}}>
                <div class="toggle"></div>
              </label>
              <label
                for="system.deleteOnFail">{{i18n "dialog.preferences.delete_on_fail"}}</label>
            </div>
          </div>
          <div class="box-right">
            <p>{{i18n "dialog.preferences.attachments_info"}}</p>
            <textarea id="attachmentExtensions" name="attachmentExtensions"
              rows="4">{{attachmentExtensions}}</textarea>

            <!-- Pandoc command resides here, because here's more space for it -->
            <hr>
            <label for="pandocCommand">
              {{i18n "dialog.preferences.pandoc_command"}}
            </label>
            <div class="input-button-group">
              <input type="text" id="pandocCommand" name="pandocCommand"
                placeholder="pandoc &quot;$infile$&quot; -f markdown $outflag$ $tpl$ $toc$ $tocdepth$ --citeproc --bibliography &quot;$bibliography$&quot; $cslstyle$ $standalone$ --pdf-engine=xelatex --mathjax -o &quot;$outfile$&quot;"
                value="{{ pandocCommand }}">
              <button type="button" id="reset-pandoc-command"
                data-tippy-content="{{i18n "dialog.preferences.reset_pandoc_command"}}">
                <clr-icon shape="refresh">
                  </clr>
              </button>
            </div>
            <span class="info">Variables: $bibliography$,
              $cslstyle$, $format$,
              $infile$, $indir$, $outfile$, $outflag$,
              $standalone$, $toc$,
              $tocdepth$, $tpl$</span>

            <hr>

            {{!-- Watchdog polling compatibility options --}}
            <p>
              {{i18n "dialog.preferences.watchdog_explainer"}}
            </p>
            <div class="cb-group">
              <label class="cb-toggle">
                <input type="checkbox" name="watchdog.activatePolling"
                  value="yes" id="activateWatchdogPolling"
                  {{#if watchdog.activatePolling}}checked="checked" {{/if}}>
                <div class="toggle"></div>
              </label>
              <label
                for="activateWatchdogPolling">{{i18n "dialog.preferences.watchdog_checkbox_label"}}</label>
            </div>

            <input class="inline time" type="number" min="0" max="10000"
              step="1" name="watchdog.stabilityThreshold"
              id="watchdogPollingStability"
              value="{{watchdog.stabilityThreshold}}" placeholder="1000">
            <label class=""
              for="watchdogPollingStability">{{i18n "dialog.preferences.watchdog_threshold_label"}}</label>

          </div> <!-- End box right -->
        </div>
      </div>
    </div>
    <div class="prefs-submit-group">
      <button type="submit"
        id="pref-save">{{i18n "dialog.button.save"}}</button>
      <button id="abort">{{i18n "dialog.button.cancel"}}</button>
      <span class="error-info"></span>
    </div>
  </form>
</div>
